<!--TODO 当私人题库变为公共题库时  在私人题库和公共题库均显示-->
<template>
  <div class="question-bank-body">
    <div class="el-page-header__content title">
      <i :class="icon"></i>
      <span>{{ title }}</span>
    </div>
    <div class="question-bank-main">
      <div class="question-bank-button-group">
        <el-button v-if="this.$store.getters.GET_ROLE === 1 || this.$store.getters.GET_ROLE === 3 || this.isCommon === 0" size="small" type="success" @click="add" class="question-bank-button">添加</el-button>
        <el-upload
            v-if="isCommon === 0"
            action="#"
            :auto-upload="false"
            :limit="1"
            :multiple="false"
            accept=".xls,.xlsx"
            :on-change="changeFile"
            :class="{hide: true}"
            class="question-bank-button">
          <el-button type="small">上传题库</el-button>
        </el-upload>
        <el-button type="small" class="question-bank-button" @click="exportBank">导出题库</el-button>
      </div>

      <el-carousel :autoplay="false" type="card" height="550px">
        <el-carousel-item v-for="item in questionBankData" :key="item.id">
          <div>
            <!--卡片样式-->
            <card :editDialogTitle.sync="editDialog.title"
                  :editDialogShow.sync="editDialog.show"
                  :editDialogId.sync="editDialog.id"
                  :info="item"
                  :isCommon="isCommon"
                  @getQuestionBankData="getQuestionBankData"/>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!--添加或修改的弹窗-->
    <el-dialog
        width="500px"
        :title="editDialog.title"
        :visible.sync="editDialog.show">
      <component
          v-if="editDialog.show"
          :is="editDialog.component"
          :editDialogShow.sync="editDialog.show"
          :id="editDialog.id"
          @getQuestionBankData="getQuestionBankData">
      </component>
    </el-dialog>
    <!--导出题库的弹窗-->
    <el-dialog
        width="380px"
        title="导出题库"
        :visible.sync="exportDialog.show"
        @close="cancelExport">
      <el-form>
        <el-form-item label="题库选择">
          <el-select
              v-model="exportDialog.selectBanks"
              multiple
              collapse-tags
              style="margin-left: 20px;"
              placeholder="请选择">
            <el-option
                v-for="item in questionBankData"
                :key="item.id"
                :label="item.bankName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <div style="text-align: center">
          <el-button type="success" size="small" @click="submitExport">确认</el-button>
          <el-button type="danger" size="small" @click="cancelExport">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import card from '@/views/main/questionBank/card'
import {get, post, excelPost} from "@/plugins/axios"

export default {
  name: "questionBank",
  components: {
    card
  },
  created() {
    this.getTitle();
    this.getQuestionBankData()
  },
  watch: {// 如果路由有变化，会再次执行该方法
    '$route': ['getTitle', 'getQuestionBankData']
  },
  data() {
    const module = '/questionBank'
    return {
      questionBankData: [],
      isCommon: 0,
      title: '',
      icon: '',
      editDialog: {
        title: '',
        show: false,
        id: null,
        component: () => import('@/views/main/questionBank/edit')
      },
      exportDialog: {
        show: false,
        selectBanks: []
      },
      uri: {
        list: module + '/ownerBank',
        upload: module + '/upload',
        export: module + '/export'
      }
    }
  },
  methods: {
    getQuestionBankData() {
      const params = {
        userId: this.$store.getters.GET_ACCOUNT.id,
        status: 1,
        isCommon: this.isCommon
      }
      get(this.uri.list, params, response => {
        if (response.code === 200) {
          this.questionBankData = response.data
        }
      })
    },
    getTitle() {
      if (this.$route.path === '/question/commonBank') {
        this.icon = 'el-icon-eleme'
        this.title = '公共题库'
        this.isCommon = 1
      } else if (this.$route.path === '/question/privateBank') {
        this.icon = 'el-icon-connection'
        this.title = '私人题库'
        this.isCommon = 0
      }
    },
    add() {
      this.editDialog.title = '添加'
      this.editDialog.show = true
      this.editDialog.id = null
    },
    changeFile(file) {
      const params = {
        userId: this.$store.getters.GET_ACCOUNT.id,
        file: file.raw
      }
      post(this.uri.upload, params, response => {
        if (response.code === 200) {
          this.getQuestionBankData()
        }
      })
    },
    exportBank() {
      this.exportDialog.show = true
    },
    submitExport() {
      const params = {
        bankIds: this.exportDialog.selectBanks
      }
      excelPost(this.uri.export, params, response => {
        const blob = new Blob([response]);
        const fileName = '题库excel.xlsx';
        const elink = document.createElement('a');
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink);
      })
      this.exportDialog.show = false
      this.exportDialog.selectBanks = []
    },
    cancelExport() {
      this.exportDialog.show = false
      this.exportDialog.selectBanks = [];
    }
  }
}
</script>

<style scoped lang="less">
.question-bank-body {
  //padding: 5px 10px 20px 10px;
  padding-top: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  background: white;

  .title {
    font-size: 22px;
    margin: 15px;
  }

  .question-bank-button-group {
    display: block;
    height: 52px;

    .question-bank-button {
      margin: 10px;
      float: left;
    }
  }

  .question-bank-main {
    padding: 5px 10px 20px 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    background: white;

    .hide {
      /deep/
      .el-upload-list {
        display: none;
      }
    }
  }
}

.el-carousel__item:nth-child(2n) {
  //background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  //background-color: #d3dce6;
}
</style>